<div class="grid-block large-up-1 align-center">
    <div class="grid-content align-center" style="text-align: center">
        <h1>{{pipeline.name}} <small><tw-command text="Start" command="/pipelines/{{pipeline.name}}/start"></tw-command></small></h1>
        <a href="#" zf-toggle="eventsPanel" class="button">Show Events</a>
    </div>
    <div class="grid-block">
        <div class="grid-block vertical">
            <div class="grid-content shrink">
                <div class="box-header">
                    <h4>Stats</h4>
                </div>
                <div class="box-body">
                    <div class="grid-block medium-up-2 small-up-1 align-center">
                        <div class="grid-content">
                            <h1>
                                <small><a ng-click="showContexts('COMPLETE')"><img tw-status-image="COMPLETE" height="50" width="50" /></a></small>
                                {{pipeline.stats.complete}} ({{pipeline.stats.percent(pipeline.stats.complete)}}%)
                            </h1>
                        </div>
                        <div class="grid-content">
                            <h1>
                                <small><a ng-click="showContexts('IN_PROGRESS')"><img tw-status-image="IN_PROGRESS" height="50" width="50" /></a></small>
                                {{pipeline.stats.inProgress}} ({{pipeline.stats.percent(pipeline.stats.inProgress)}}%)
                            </h1>
                        </div>
                        <div class="grid-content">
                            <h1>
                                <small><a ng-click="showContexts('FAILURE')"><img tw-status-image="FAILURE" height="50" width="50" /></a></small>
                                {{pipeline.stats.failed}} ({{pipeline.stats.percent(pipeline.stats.failed)}}%)
                            </h1>
                        </div>
                        <div class="grid-content">
                            <h1>
                                <small><a ng-click="showContexts('ERROR')"><img tw-status-image="ERROR" height="50" width="50" /></a></small>
                                {{pipeline.stats.errored}} ({{pipeline.stats.percent(pipeline.stats.errored)}}%)
                            </h1>
                        </div>
                        <a ng-click="showContexts('ALL')">Show All</a>
                    </div>
                </div>
            </div>
            <div class="grid-content">
                <div class="box-header">
                    <h4>
                        Script
                        <small>
                            <a class="button small hollow" href="#" zf-open="editModal">Edit <img height="16" width="16" src="./assets/img/edit.svg" /></a>
                        </small>
                    </h4>
                </div>
                <div class="box-body grid-content" ng-show="showScript" style="max-height: 600px; overflow: scroll;">
                    <div hljs hljs-language="groovy" hljs-source="pipeline.script">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div zf-modal="" id="editModal" class="collapse">
    <div class="grid-block vertical">
        <div class="primary title-bar">
            <div class="center title">Update Script</div>
            <span zf-close="" class="right"><a>Close</a></span>
        </div>
        <div class="grid-content padding" style="padding-top: 1rem;">
            <form novalidate>
                <textarea elastic ng-model="formdata.script" >
                </textarea>
                <a class="button" ng-click="submitScriptUpdate(formdata)">Save</a>
                <a zf-close="" class="button">Cancel</a>
            </form>
        </div>
    </div>
</div>

<div zf-panel="" id="contextsPanel" position="right">
    <div class="secondary title-bar">
        <div class="center title">{{panelContexts.title}} Contexts</div>
        <span zf-close="" class="right"><a>Close</a></span>
    </div>
    <div class="grid-content shrink">
        <table>
            <thead>
            <tr>
                <th></th>
                <th>Start Time</th>
                <th>End Time</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="c in panelContexts.list | orderBy: 'startTime' : true">
                <td><a ng-href="/#/pipelines/{{pipeline.name}}/contexts/{{c.id}}"><img tw-status-image="{{c.status}}" height="32" width="32" /></a></td>
                <td>{{c.startTime | date:'medium'}}</td>
                <td>{{c.endTime | date:'medium'}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div zf-panel="" id="eventsPanel" position="bottom">
    <div class="primary title-bar">
        <div class="center title">Events</div>
        <span zf-close="" class="right"><a>Close</a></span>
    </div>
    <div class="grid-content center">
        <table>
            <thead>
            <tr>
                <th>Date/Time</th>
                <th>Type</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="e in pipeline.events">
                <td>{{(e.eventDateTime.epochSecond * 1000) + (e.eventDateTime.nano / 1000000) | date:'MMM d, y H:mm:ss.sss '}}</td>
                <td>{{e.type}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>